<template>
    <div class="time">
        <clock :time="time"></clock>
    </div>
</template>
<script>
    import clock from 'vue-clock2';
 
    export default {
        components: {clock},
 
        name: "myclock",
        data() {
            return {
                time: '10:40'
            }
        },
        methods: {
            fun() {
                let date = new Date();
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                this.time = h + ":" + m+":"+s;
            }
        },
        mounted() {
            window.setInterval(() => {
                setTimeout(this.fun, 0)
            }, 1000)
        }
    }
 
 
</script>
 
<style scoped>
    .time{
        height: 155px;
        width: 155px;
        background: url("../assets/images/timg3.jpg");
        background-size: 100% 100%;
    }
</style>